<!-- 系统设置 -->
<template>
  <el-container>
    <el-main>
      <el-card>
        <el-tabs tab-position="left" class="demo-tabs">
          <!-- 系统设置 -->
          <el-tab-pane label="系统设置">
            <el-form :model="system" label-position="top">
              <el-form-item label="系统地址">
                <el-input
                  v-model="system.address"
                  placeholder="请输入系统地址"
                />
              </el-form-item>

              <el-form-item label="后台地址">
                <el-input
                  v-model="system.background"
                  placeholder="请输入后台地址"
                />
              </el-form-item>

              <el-form-item label="系统标题">
                <el-input
                  v-model="system.title"
                  placeholder="请输入系统标题，将作为 head.title 显示"
                />
              </el-form-item>

              <el-form-item label="Logo">
                <el-input
                  v-model="system.logo"
                  placeholder="请输入 logo 链接或选择文件，也可输入 html"
                />
              </el-form-item>

              <el-form-item label="Favicon">
                <el-input
                  v-model="system.favicon"
                  placeholder="请输入 favicon 链接或选择文件"
                />
              </el-form-item>

              <el-form-item label="页脚信息">
                <el-input
                  v-model="system.foot"
                  type="textarea"
                  placeholder="请输入页脚信息"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="systemSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 国际化设置 -->
          <el-tab-pane label="国际化设置">国际化设置</el-tab-pane>

          <!-- SEO设置 -->
          <el-tab-pane label="SEO设置">
            <el-form :model="seo" label-position="top">
              <el-form-item label="关键词">
                <el-input
                  v-model="seo.keyword"
                  placeholder="请输入关键词，空格分隔"
                />
              </el-form-item>

              <el-form-item label="描述信息">
                <el-input
                  v-model="seo.description"
                  type="textarea"
                  placeholder="请输入描述信息"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="seoSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 数据统计 -->
          <el-tab-pane label="数据统计">
            <el-form :model="data" label-position="top">
              <el-form-item label="百度统计">
                <el-input
                  v-model="data.baidu"
                  placeholder="请输入百度统计 id"
                />
              </el-form-item>

              <el-form-item label="谷歌分析">
                <el-input
                  v-model="data.google"
                  placeholder="请输入谷歌分析 id"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="dataSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- OSS设置 -->
          <el-tab-pane label="OSS设置">
            <el-alert type="info" title="说明" show-icon>
              <template #default>
                <div>
                  请在编辑器中输入您的 oss 配置，并添加 type 字段区分
                  {"type":"aliyun","accessKeyId":"","accessKeySecret":"","bucket":"","https":true,"region":""}
                </div>
              </template>
            </el-alert>
          </el-tab-pane>

          <!-- SMTP服务 -->
          <el-tab-pane label="SMTP服务">
            <el-form :model="smtp" label-position="top">
              <el-form-item label="SMTP 地址">
                <el-input v-model="smtp.address" placeholder="请输入 SMTP" />
              </el-form-item>

              <el-form-item label="SMTP 端口（强制使用 SSL 连接）">
                <el-input v-model="smtp.port" placeholder="请输入 SMTP 端口" />
              </el-form-item>

              <el-form-item label="SMTP 用户">
                <el-input
                  v-model="smtp.username"
                  placeholder="请输入 SMTP 用户"
                />
              </el-form-item>

              <el-form-item label="SMTP 密码">
                <el-input
                  v-model="smtp.password"
                  placeholder="也可能是授权码"
                />
              </el-form-item>

              <el-form-item label="发件人">
                <el-input
                  v-model="smtp.port"
                  placeholder="请输入正确的邮箱地址"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="smtpSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive } from "vue";

/************************* 系统设置 *************************/

const system = reactive({});

const systemSave = () => {
  console.log("系统设置!");
};

/************************* SEO设置 *************************/

const seo = reactive({});

const seoSave = () => {
  console.log("SEO设置!");
};

/************************* 数据统计 *************************/

const data = reactive({});

const dataSave = () => {
  console.log("数据统计!");
};

/************************* SMTP设置 *************************/

const smtp = reactive({});

const smtpSave = () => {
  console.log("SMTP设置!");
};
</script>

<style scoped lang="scss"></style>
